<template>
  <div class="wrapper">
    <v-gantt-chart
      :startTime="startTime"
      :endTime="endTime"
      :datas="datas"
      :scale="30"
      :cellWidth="cellWidth"
      :cellHeight="cellHeight"
    >
      <template v-slot:block="{ data, item }">
        <!-- 你的容器块组件 -->
        <Test
          :data="data"
          :updateTimeLines="updateTimeLines"
          :cellHeight="cellHeight"
          :currentTime="currentTime"
          :item="item"
        ></Test>
      </template>
      <template v-slot:left="{ data }">
        <!-- 你的行名组件 -->
        <TestLeft :data="data"></TestLeft>
      </template>
      <template v-slot:title>
        <!-- 你的表头组件 -->
        会议室
      </template>
    </v-gantt-chart>
  </div>
</template>

<script>
import Test from "./meeting-con"; //你自己的gantt条容器
import TestLeft from "./meeting-left"; //你自己的行名称组件
import { mockDatas } from "../mock/index"; //伪造的数据
import dayjs from "dayjs"; //时间库

export default {
  name: "App",
  components: { Test, TestLeft },
  data() {
    return {
      startTime: dayjs().toString(), //时间轴开始时间
      endTime: dayjs().add(2, "d").add(2, "h").add(5, "s").toString(), //时间结束时间
      datas: [
        {
          id: "1", //非必须
          icon: ["pause", "cash"],
          meetingName: "测试会议",
          gtArray: [
            //默认的需要渲染的数组
            {
              id: 1,
              name: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-03 20:18:18",
            },
            {
              id: 2,
              name: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-03 20:18:18",
            },
            {
              id: 3,
              name: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-03 20:18:18",
            },
            {
              id: 4,
              name: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-03 20:18:18",
            },
          ],
          customKey: [
            //自定义的需要渲染的数组
            {
              id: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-03 20:18:18",
            },
          ],
        },
        {
          id: "2", //非必须
          meetingName: "测试会议",
          icon: ["pause", "cash"],
          gtArray: [
            //默认的需要渲染的数组
            {
              name: "test", //非必须
              start: "2022-07-03 18:18:18",
              end: "2022-07-03 20:18:18",
            },
          ],
          customKey: [
            //自定义的需要渲染的数组
            {
              id: "test", //非必须
              start: "2022-07-03 18:18:18",
              end: "2022-07-03 20:18:18",
            },
          ],
        },
        {
          id: "3", //非必须
          meetingName: "测试会议",
          icon: ["pause", "cash"],
          gtArray: [
            //默认的需要渲染的数组
            {
              name: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-02 20:18:18",
            },
          ],
          customKey: [
            //自定义的需要渲染的数组
            {
              id: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-02 20:18:18",
            },
          ],
        },
        {
          id: "4", //非必须
          meetingName: "测试会议",
          icon: ["pause", "cash"],
          gtArray: [
            //默认的需要渲染的数组
            {
              name: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-02 20:18:18",
            },
          ],
          customKey: [
            //自定义的需要渲染的数组
            {
              id: "test", //非必须
              start: "2022-07-02 18:18:18",
              end: "2022-07-02 20:18:18",
            },
          ],
        },
      ], // gantt数据
      cellWidth: 100,
      cellHeight: 30,
      currentTime: dayjs(),
    };
  },
  methods: {
    updateTimeLines(timeA, timeB) {
      this.timeLines = [
        {
          time: timeA,
          text: "自定义",
        },
        {
          time: timeB,
          text: "测试",
          color: "#747e80",
        },
      ];
    },
  },
};
</script>
<style  scoped>
.wrapper .gantt-elastic__grid-line-time {
  display: none;
}
</style>